<template>
  <div style="font-size: 0.3rem;">
    <div class="plbox" v-for="(ite, ind) in dataList" :key="ind">
        <div class="pl-com">
          <div class="plCom-top">
            <span>广西百色用户**</span>
            <van-rate v-model="value" allow-half :size="13" />
          </div>
          <div class="pl-com-bottom">
            <span>{{ ite.banviewname }}</span
            ><span>及时回复</span><span>语气很温和</span><span>讲解很细致</span>
          </div>
          <div class="pl-yj">感谢{{ item.doctorname }}医生的回复</div>
          <div class="pl-bottom">{{ ite.banviewtimer }}</div>
        </div>
      </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios'
import { useRoute } from 'vue-router'
const z = Math.round(Math.random() * 5)
const value = z
const doctorbrowse = ref(localStorage.getItem('doctorbrowse'))
const route = useRoute()
const item = route.query
const dataList = ref([])
let n = Math.round(Math.random() * 20)
const getData = async () => {
  await axios
    .get('/api/flag', {
      params: {
        pageCode: 1,
        pageSize: 10,
      },
    })
    .then(res => {
      dataList.value = res.data.data.slice(0, n)
    })
}

getData()
</script>

<style scoped>
.plbox {
      width: 100%;
      height: 170px;
      border-bottom: 1px solid #e3e3e3;

      .pl-com {
        width: 100%;
        height: 100px;
        margin-top: 15px;
        font-size: 0.3rem;

        .plCom-top {
          width: 100%;
          padding: 0 10px;
          display: flex;
          justify-content: space-between;
        }

        .pl-com-bottom {
          width: 100%;
          padding: 0 10px;
          display: flex;
          flex-wrap: wrap;

          span {
            //width: 85px;
            padding: 0 10px;
            height: 27px;
            border: 1px solid #bcbcbc;
            color: #464646;
            text-align: center;
            line-height: 27px;
            border-radius: 15px;
            margin-right: 10px;
            margin-top: 10px;
          }
        }

        .pl-yj {
          width: 100%;
          padding: 0 10px;
          margin-top: 10px;
          font-size: 0.4rem;
        }

        .pl-bottom {
          width: 100%;
          padding: 0 10px;
          margin-top: 5px;
          font-size: 0.25rem;
          color: #9a9a9a;
        }
      }
    }
</style>